<template>
  <!-- 气泡背景 -->
  <div class="bruce">
    <ul class="bubble-bgwall">
      <li>Reset</li>
      <li>Password</li>
      <li>Secure</li>
      <li>Recovery</li>
      <li>Verify</li>
      <li>Safe</li>
      <li>Modern</li>
      <li>Fast</li>
      <li>Smart</li>
      <li>Cloud</li>
    </ul>
  </div>

  <!-- 忘记密码容器 -->
  <div class="forgot-container">
    <div class="forgot-box">
      <div class="forgot-header">
        <div class="step-indicator">
          <div class="step" :class="{ 'active': currentStep === 1, 'completed': currentStep > 1 }">
            <div class="step-number">1</div>
            <div class="step-label">选择验证方式</div>
          </div>
          <div class="step-line" :class="{ 'active': currentStep > 1 }"></div>
          <div class="step" :class="{ 'active': currentStep === 2, 'completed': currentStep > 2 }">
            <div class="step-number">2</div>
            <div class="step-label">身份验证</div>
          </div>
          <div class="step-line" :class="{ 'active': currentStep > 2 }"></div>
          <div class="step" :class="{ 'active': currentStep === 3, 'completed': currentStep > 3 }">
            <div class="step-number">3</div>
            <div class="step-label">重置密码</div>
          </div>
          <div class="step-line" :class="{ 'active': currentStep > 3 }"></div>
          <div class="step" :class="{ 'active': currentStep === 4 }">
            <div class="step-number">4</div>
            <div class="step-label">完成</div>
          </div>
        </div>
        
        <h1>{{ stepTitles[currentStep - 1] }}</h1>
        <p class="subtitle">{{ stepSubtitles[currentStep - 1] }}</p>
      </div>

      <!-- 第一步：选择验证方式 -->
      <div v-if="currentStep === 1" class="forgot-form">
        <div class="verification-options">
          <h3>请选择验证方式</h3>
          <p class="options-desc">选择您希望用于找回密码的验证方式</p>
          
          <div class="option-cards">
            <div 
              class="option-card" 
              :class="{ 'selected': selectedMethod === 'phone' }"
              @click="selectMethod('phone')"
            >
              <div class="option-icon">📱</div>
              <div class="option-content">
                <h4>手机验证</h4>
                <p>通过手机短信验证码找回密码</p>
              </div>
              <div class="option-check">
                <span v-if="selectedMethod === 'phone'">✓</span>
              </div>
            </div>
            
            <div 
              class="option-card" 
              :class="{ 'selected': selectedMethod === 'email' }"
              @click="selectMethod('email')"
            >
              <div class="option-icon">📧</div>
              <div class="option-content">
                <h4>邮箱验证</h4>
                <p>通过邮箱验证码找回密码</p>
              </div>
              <div class="option-check">
                <span v-if="selectedMethod === 'email'">✓</span>
              </div>
            </div>
          </div>
        </div>

        <div class="button-container">
          <button 
            type="button" 
            class="primary-button" 
            :disabled="!selectedMethod"
            @click="goToStep(2)"
          >
            下一步
          </button>
          <button type="button" @click="goToLogin" class="secondary-button">
            返回登录
          </button>
        </div>
      </div>

      <!-- 第二步：身份验证 -->
      <form v-if="currentStep === 2" @submit.prevent="handleVerifyIdentity" class="forgot-form">
        <div class="verification-info">
          <div class="method-icon">
            <span v-if="selectedMethod === 'phone'">📱</span>
            <span v-else>📧</span>
          </div>
          <p>
            <span v-if="selectedMethod === 'phone'">手机短信验证</span>
            <span v-else>邮箱验证</span>
          </p>
        </div>

        <!-- 用户名 -->
        <div class="form-group">
          <label for="username">用户名 <span class="required">*</span></label>
          <input 
            id="username" 
            v-model="formData.username" 
            type="text" 
            placeholder="请输入您的用户名" 
            required 
          />
        </div>

        <!-- 手机号或邮箱 -->
        <div class="form-group" v-if="selectedMethod === 'phone'">
          <label for="phone">手机号 <span class="required">*</span></label>
          <input 
            id="phone" 
            v-model="formData.phone" 
            type="tel" 
            placeholder="请输入注册时使用的手机号" 
            required 
          />
        </div>

        <div class="form-group" v-if="selectedMethod === 'email'">
          <label for="email">邮箱地址 <span class="required">*</span></label>
          <input 
            id="email" 
            v-model="formData.email" 
            type="email" 
            placeholder="请输入注册时使用的邮箱地址" 
            required 
          />
        </div>

        <!-- 验证码 -->
        <div class="form-group">
          <label for="verifyCode">验证码 <span class="required">*</span></label>
          <div class="code-container">
            <input 
              id="verifyCode" 
              v-model="formData.verifyCode" 
              type="text" 
              placeholder="请输入6位验证码" 
              required 
              maxlength="6"
            />
            <button 
              type="button" 
              class="code-button" 
              @click="sendVerifyCode"
              :disabled="countdown > 0 || sendingCode"
            >
              <span v-if="countdown > 0">{{ countdown }}s后重发</span>
              <span v-else-if="sendingCode">发送中...</span>
              <span v-else>获取验证码</span>
            </button>
          </div>
        </div>

        <div class="button-container">
          <button type="submit" class="primary-button" :disabled="loading">
            <span v-if="!loading">验证身份</span>
            <span v-else>验证中...</span>
          </button>
          <button type="button" @click="goToStep(1)" class="secondary-button">
            返回上一步
          </button>
        </div>
      </form>

      <!-- 第三步：重置密码 -->
      <form v-if="currentStep === 3" @submit.prevent="handleResetPassword" class="forgot-form">
        <div class="success-info">
          <div class="success-icon">✓</div>
          <p>身份验证成功！请设置新密码</p>
        </div>

        <!-- 新密码 -->
        <div class="form-group">
          <label for="newPassword">新密码 <span class="required">*</span></label>
          <div class="password-container">
            <input 
              id="newPassword" 
              v-model="formData.newPassword" 
              :type="showNewPassword ? 'text' : 'password'" 
              placeholder="请输入新密码（6-20位）"
              required 
            />
            <button 
              type="button" 
              class="eye-button" 
              @click="showNewPassword = !showNewPassword"
            >
              <span v-if="showNewPassword">👁️</span>
              <span v-else>👁️‍🗨️</span>
            </button>
          </div>
          <div class="password-strength">
            <div class="strength-meter">
              <div class="strength-bar" :class="passwordStrength.class" :style="{ width: passwordStrength.width }"></div>
            </div>
            <span class="strength-text">{{ passwordStrength.text }}</span>
          </div>
        </div>

        <!-- 确认密码 -->
        <div class="form-group">
          <label for="confirmPassword">确认密码 <span class="required">*</span></label>
          <div class="password-container">
            <input 
              id="confirmPassword" 
              v-model="formData.confirmPassword" 
              :type="showConfirmPassword ? 'text' : 'password'" 
              placeholder="请再次输入新密码"
              required 
            />
            <button 
              type="button" 
              class="eye-button" 
              @click="showConfirmPassword = !showConfirmPassword"
            >
              <span v-if="showConfirmPassword">👁️</span>
              <span v-else>👁️‍🗨️</span>
            </button>
          </div>
        </div>

        <!-- 密码要求提示 -->
        <div class="password-requirements">
          <p class="requirements-title">密码要求：</p>
          <ul class="requirements-list">
            <li :class="{ 'valid': requirements.length }">
              <span class="check-icon">{{ requirements.length ? '✓' : '○' }}</span>
              长度6-20位
            </li>
            <li :class="{ 'valid': requirements.letter }">
              <span class="check-icon">{{ requirements.letter ? '✓' : '○' }}</span>
              包含字母
            </li>
            <li :class="{ 'valid': requirements.number }">
              <span class="check-icon">{{ requirements.number ? '✓' : '○' }}</span>
              包含数字
            </li>
          </ul>
        </div>

        <div class="button-container">
          <button type="submit" class="primary-button" :disabled="loading">
            <span v-if="!loading">重置密码</span>
            <span v-else>重置中...</span>
          </button>
          <button type="button" @click="goToStep(2)" class="secondary-button">
            返回上一步
          </button>
        </div>
      </form>

      <!-- 第四步：完成 -->
      <div v-if="currentStep === 4" class="forgot-form">
        <div class="completion-info">
          <div class="completion-icon">🎉</div>
          <h3>密码重置成功！</h3>
          <p>您的密码已经成功重置，请使用新密码登录</p>
          
          <div class="tips">
            <h4>安全提示：</h4>
            <ul>
              <li>请妥善保管您的新密码</li>
              <li>建议定期更换密码</li>
              <li>不要在公共场所输入密码</li>
              <li>如有异常请及时联系管理员</li>
            </ul>
          </div>
        </div>

        <div class="button-container">
          <button @click="goToLogin" class="primary-button">
            立即登录
          </button>
          <button @click="goToRegister" class="secondary-button">
            创建新账户
          </button>
        </div>
      </div>

      <div v-if="error" class="error-message">
        {{ error }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { userApi } from '@/api/user'

const router = useRouter()

// 当前步骤
const currentStep = ref(1)

// 步骤标题和副标题
const stepTitles = ['选择验证方式', '身份验证', '重置密码', '重置成功']
const stepSubtitles = [
  '请选择您希望用于找回密码的验证方式',
  '请输入用户名和验证码进行身份验证',
  '请设置您的新密码',
  '密码重置完成，请使用新密码登录'
]

// 选择的验证方式
const selectedMethod = ref('')

// 表单数据
const formData = reactive({
  username: '',
  phone: '',
  email: '',
  verifyCode: '',
  newPassword: '',
  confirmPassword: ''
})

// 用户信息（从第二步验证获取）
const userInfo = ref(null)

const error = ref('')
const loading = ref(false)
const showNewPassword = ref(false)
const showConfirmPassword = ref(false)
const sendingCode = ref(false)
const countdown = ref(0)

let countdownInterval = null

// 密码强度计算
const passwordStrength = computed(() => {
  const password = formData.newPassword
  if (!password) {
    return { class: 'weak', width: '0%', text: '' }
  }
  
  let score = 0
  let text = ''
  let className = ''
  
  // 长度检查
  if (password.length >= 6) score += 1
  if (password.length >= 10) score += 1
  
  // 复杂度检查
  if (/[a-zA-Z]/.test(password)) score += 1
  if (/\d/.test(password)) score += 1
  if (/[^a-zA-Z\d]/.test(password)) score += 1
  
  if (score <= 2) {
    className = 'weak'
    text = '弱'
  } else if (score <= 3) {
    className = 'medium'
    text = '中等'
  } else {
    className = 'strong'
    text = '强'
  }
  
  return {
    class: className,
    width: `${(score / 5) * 100}%`,
    text: text
  }
})

// 密码要求检查
const requirements = computed(() => ({
  length: formData.newPassword.length >= 6 && formData.newPassword.length <= 20,
  letter: /[a-zA-Z]/.test(formData.newPassword),
  number: /\d/.test(formData.newPassword)
}))

// 选择验证方式
const selectMethod = (method) => {
  selectedMethod.value = method
}

// 发送验证码
const sendVerifyCode = async () => {
  try {
    // 先验证用户名
    if (!formData.username) {
      error.value = '请先输入用户名'
      ElMessage.error('请先输入用户名')
      return
    }

    // 验证邮箱或手机号
    if (selectedMethod.value === 'phone' && !formData.phone) {
      error.value = '请输入手机号'
      ElMessage.error('请输入手机号')
      return
    }

    if (selectedMethod.value === 'email' && !formData.email) {
      error.value = '请输入邮箱地址'
      ElMessage.error('请输入邮箱地址')
      return
    }

    sendingCode.value = true
    
    try {
      // 验证用户身份信息
      const verifyData = {
        username: formData.username
      }

      if (selectedMethod.value === 'email') {
        verifyData.email = formData.email
      } else if (selectedMethod.value === 'phone') {
        verifyData.phoneNumber = formData.phone
      }

      const response = await userApi.verifyIdentity(verifyData)
      
      // 存储用户信息用于后续步骤
      userInfo.value = response
      
      // 模拟发送验证码（实际项目中需要集成短信/邮件服务）
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      ElMessage.success(`验证码已发送到您的${selectedMethod.value === 'phone' ? '手机' : '邮箱'}`)
      
      // 开始倒计时
      countdown.value = 60
      countdownInterval = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
          clearInterval(countdownInterval)
        }
      }, 1000)
      
    } catch (apiError) {
      let errorMsg = '验证码发送失败'
      
      if (apiError.response?.status === 404) {
        errorMsg = '用户不存在'
      } else if (apiError.response?.status === 400) {
        errorMsg = apiError.response.data || '用户名与邮箱/手机号不匹配'
      } else if (apiError.message) {
        errorMsg = apiError.message
      }
      
      error.value = errorMsg
      ElMessage.error(errorMsg)
    }
    
  } catch (err) {
    error.value = '验证码发送失败，请重试'
    ElMessage.error(error.value)
  } finally {
    sendingCode.value = false
  }
}

// 第二步：验证身份
const handleVerifyIdentity = async () => {
  try {
    error.value = ''
    
    // 基本验证
    if (!formData.username) {
      error.value = '请输入用户名'
      return
    }
    
    if (selectedMethod.value === 'phone' && !formData.phone) {
      error.value = '请输入手机号'
      return
    }
    
    if (selectedMethod.value === 'email' && !formData.email) {
      error.value = '请输入邮箱地址'
      return
    }
    
    if (!formData.verifyCode) {
      error.value = '请输入验证码'
      return
    }

    loading.value = true
    
    try {
      // 模拟验证码校验（实际项目中需要验证码服务）
      if (formData.verifyCode !== '123456') {
        throw new Error('验证码错误')
      }

      // 如果还没有用户信息，重新验证身份
      if (!userInfo.value) {
        const verifyData = {
          username: formData.username
        }

        if (selectedMethod.value === 'email') {
          verifyData.email = formData.email
        } else if (selectedMethod.value === 'phone') {
          verifyData.phoneNumber = formData.phone
        }

        userInfo.value = await userApi.verifyIdentity(verifyData)
      }
      
      ElMessage.success('身份验证成功！')
      currentStep.value = 3
      
    } catch (apiError) {
      let errorMsg = '验证失败'
      
      if (apiError.response?.status === 404) {
        errorMsg = '用户不存在'
      } else if (apiError.response?.status === 400) {
        errorMsg = apiError.response.data || '用户名与邮箱/手机号不匹配'
      } else if (apiError.message) {
        errorMsg = apiError.message
      }
      
      error.value = errorMsg
      ElMessage.error(errorMsg)
    }
    
  } catch (err) {
    error.value = '验证失败，请重试'
    ElMessage.error(error.value)
  } finally {
    loading.value = false
  }
}

// 第三步：重置密码
const handleResetPassword = async () => {
  try {
    error.value = ''
    
    // 验证新密码
    if (!formData.newPassword) {
      error.value = '请输入新密码'
      return
    }
    
    if (formData.newPassword.length < 6 || formData.newPassword.length > 20) {
      error.value = '密码长度应为6-20位'
      return
    }
    
    if (!formData.confirmPassword) {
      error.value = '请确认密码'
      return
    }
    
    if (formData.newPassword !== formData.confirmPassword) {
      error.value = '两次输入的密码不一致'
      return
    }

    // 检查是否有用户信息
    if (!userInfo.value || !userInfo.value.id) {
      error.value = '用户信息获取失败，请重新验证'
      currentStep.value = 2
      return
    }

    loading.value = true
    
    try {
      // 使用重置密码接口
      await userApi.resetPassword({
        userId: userInfo.value.id,
        newPassword: formData.newPassword,
        verifyCode: formData.verifyCode || '123456'
      })
      
      ElMessage.success('密码重置成功！')
      currentStep.value = 4
      
    } catch (apiError) {
      let errorMsg = '密码重置失败'
      
      if (apiError.response?.status === 404) {
        errorMsg = '用户不存在'
      } else if (apiError.response?.status === 400) {
        errorMsg = apiError.response.data || '密码格式不正确或验证码错误'
      } else if (apiError.message) {
        errorMsg = apiError.message
      }
      
      error.value = errorMsg
      ElMessage.error(errorMsg)
    }
    
  } catch (err) {
    error.value = '密码重置失败，请重试'
    ElMessage.error(error.value)
  } finally {
    loading.value = false
  }
}

// 跳转到指定步骤
const goToStep = (step) => {
  currentStep.value = step
  error.value = ''
}

// 跳转到登录页
const goToLogin = () => {
  router.push('/login')
}

// 跳转到注册页
const goToRegister = () => {
  router.push('/register')
}
</script>

<style scoped>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 气泡背景样式 */
.bruce {
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(270deg, #ff6b6b, #ee5a24);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
}

.bubble-bgwall {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.bubble-bgwall li {
  display: flex;
  position: absolute;
  bottom: -200px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.15);
  color: #ccc;
  font-size: 14px;
  font-weight: 500;
  animation: bubble 15s infinite;
}

.bubble-bgwall li:nth-child(1) {
  left: 10%;
}

.bubble-bgwall li:nth-child(2) {
  left: 20%;
  width: 90px;
  height: 90px;
  animation-duration: 7s;
  animation-delay: 2s;
}

.bubble-bgwall li:nth-child(3) {
  left: 25%;
  animation-delay: 4s;
}

.bubble-bgwall li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.3);
  animation-duration: 8s;
}

.bubble-bgwall li:nth-child(5) {
  left: 70%;
}

.bubble-bgwall li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.2);
  animation-delay: 3s;
}

.bubble-bgwall li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  animation-delay: 2s;
}

.bubble-bgwall li:nth-child(8) {
  left: 55%;
  width: 40px;
  height: 40px;
  font-size: 12px;
  animation-duration: 15s;
  animation-delay: 4s;
}

.bubble-bgwall li:nth-child(9) {
  left: 25%;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  animation-duration: 12s;
  animation-delay: 2s;
}

.bubble-bgwall li:nth-child(10) {
  left: 85%;
  width: 160px;
  height: 160px;
  animation-delay: 5s;
}

@keyframes bubble {
  0% {
    opacity: 0.5;
    transform: translateY(0) rotate(45deg);
  }
  25% {
    opacity: 0.75;
    transform: translateY(-400px) rotate(90deg);
  }
  50% {
    opacity: 1;
    transform: translateY(-600px) rotate(135deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-1000px) rotate(180deg);
  }
}

/* 忘记密码容器 */
.forgot-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 580px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  z-index: 1000;
  animation: fadeIn 0.6s ease;
}

/* 忘记密码框 */
.forgot-box {
  background: white;
  border-radius: 15px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  width: 100%;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* 头部样式 */
.forgot-header {
  padding: 30px 30px 25px;
  text-align: center;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  position: relative;
  overflow: hidden;
}

.forgot-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

/* 步骤指示器 */
.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 11px;
  opacity: 0.8;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.step.active .step-number {
  background: rgba(255, 255, 255, 0.9);
  color: #ff6b6b;
  border-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.1);
}

.step.active .step-label {
  opacity: 1;
  font-weight: 600;
}

.step.completed .step-number {
  background: rgba(76, 217, 100, 0.9);
  border-color: rgba(76, 217, 100, 0.9);
  color: white;
}

.step-line {
  width: 45px;
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 10px;
  transition: all 0.3s ease;
}

.step-line.active {
  background: rgba(76, 217, 100, 0.7);
}

.forgot-header h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.forgot-header .subtitle {
  font-size: 14px;
  opacity: 0.9;
  position: relative;
  z-index: 1;
  line-height: 1.5;
}

/* 表单样式 */
.forgot-form {
  padding: 30px;
}

/* 验证方式选择 */
.verification-options {
  margin-bottom: 25px;
}

.verification-options h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
  text-align: center;
}

.options-desc {
  color: #666;
  text-align: center;
  margin-bottom: 25px;
  font-size: 14px;
}

.option-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.option-card {
  display: flex;
  align-items: center;
  padding: 20px;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
}

.option-card:hover {
  border-color: #ff6b6b;
  background: #fff5f5;
  transform: translateY(-2px);
}

.option-card.selected {
  border-color: #ff6b6b;
  background: linear-gradient(135deg, #fff5f5, #ffe8e8);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2);
}

.option-icon {
  font-size: 32px;
  margin-right: 20px;
  opacity: 0.8;
}

.option-content {
  flex: 1;
}

.option-content h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.option-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.option-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #ff6b6b;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6b6b;
  font-weight: bold;
  transition: all 0.3s ease;
}

/* 验证信息 */
.verification-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: linear-gradient(135deg, #fff5f5, #ffe8e8);
  border: 1px solid #ff6b6b;
  border-radius: 8px;
  margin-bottom: 20px;
}

.method-icon {
  font-size: 24px;
}

.verification-info p {
  flex: 1;
  color: #333;
  font-weight: 500;
  margin: 0;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.required {
  color: #ff4757;
}

.form-group input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group input:focus {
  border-color: #ff6b6b;
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

.form-group input:hover {
  border-color: #ff6b6b;
  box-shadow: 0 2px 12px rgba(255, 107, 107, 0.2);
}

/* 验证码容器 */
.code-container {
  position: relative;
  display: flex;
  gap: 10px;
}

.code-container input {
  flex: 1;
}

.code-button {
  padding: 12px 16px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  min-width: 120px;
}

.code-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #ee5a24, #ff6b6b);
  transform: translateY(-1px);
}

.code-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* 密码容器 */
.password-container {
  position: relative;
  display: flex;
  gap: 10px;
}

.eye-button {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  padding: 4px;
  font-size: 16px;
  transition: color 0.3s ease;
}

.eye-button:hover {
  color: #ff6b6b;
}

/* 密码强度指示器 */
.password-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.strength-meter {
  flex: 1;
  height: 4px;
  background: #e1e8ed;
  border-radius: 2px;
  overflow: hidden;
}

.strength-bar {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.strength-bar.weak {
  background: #ff4757;
}

.strength-bar.medium {
  background: #ffa726;
}

.strength-bar.strong {
  background: #4caf50;
}

.strength-text {
  font-size: 12px;
  font-weight: 500;
  min-width: 30px;
}

/* 密码要求 */
.password-requirements {
  margin-top: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #ff6b6b;
}

.requirements-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.requirements-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.requirements-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
  color: #666;
  transition: color 0.3s ease;
}

.requirements-list li.valid {
  color: #4caf50;
}

.check-icon {
  font-size: 12px;
  font-weight: bold;
  width: 16px;
  text-align: center;
}

/* 成功信息 */
.success-info {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: linear-gradient(135deg, #d4edda, #c3e6cb);
  border: 1px solid #4caf50;
  border-radius: 8px;
  margin-bottom: 20px;
}

.success-icon {
  width: 24px;
  height: 24px;
  background: #4caf50;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.success-info p {
  flex: 1;
  color: #155724;
  font-weight: 500;
  margin: 0;
}

/* 完成信息 */
.completion-info {
  text-align: center;
  padding: 20px 0;
}

.completion-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.completion-info h3 {
  font-size: 24px;
  color: #333;
  margin-bottom: 10px;
}

.completion-info > p {
  font-size: 16px;
  color: #666;
  margin-bottom: 25px;
  line-height: 1.5;
}

.tips {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  text-align: left;
  border-left: 4px solid #4caf50;
  margin: 20px 0;
}

.tips h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 12px;
}

.tips ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tips li {
  padding: 4px 0;
  font-size: 14px;
  color: #555;
  position: relative;
  padding-left: 20px;
}

.tips li::before {
  content: '•';
  color: #4caf50;
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* 按钮容器 */
.button-container {
  margin-top: 25px;
  display: flex;
  gap: 15px;
}

/* 主要按钮 */
.primary-button {
  flex: 1;
  padding: 14px 20px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.primary-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #ee5a24, #ff6b6b);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.primary-button:disabled {
  opacity: 0.8;
  cursor: not-allowed;
  transform: none;
}

/* 次要按钮 */
.secondary-button {
  flex: 1;
  padding: 14px 20px;
  background: white;
  color: #ff6b6b;
  border: 2px solid #ff6b6b;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.secondary-button:hover {
  background: #ff6b6b;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

/* 错误消息 */
.error-message {
  margin-top: 20px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #ffebee, #ffcdd2);
  color: #c62828;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  border: 1px solid #ef9a9a;
  animation: shake 0.5s ease;
}

/* 动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .forgot-container {
    width: 95vw;
    max-height: 95vh;
  }
  
  .forgot-header {
    padding: 25px 20px 20px;
  }
  
  .step-indicator {
    margin-bottom: 20px;
  }
  
  .step-line {
    width: 30px;
    margin: 0 5px;
  }
  
  .step-label {
    font-size: 10px;
  }
  
  .forgot-form {
    padding: 20px;
  }
  
  .code-container {
    flex-direction: column;
  }
  
  .code-button {
    min-width: auto;
  }
  
  .button-container {
    flex-direction: column;
  }

  .option-cards {
    gap: 12px;
  }

  .option-card {
    padding: 15px;
  }

  .option-icon {
    font-size: 24px;
    margin-right: 15px;
  }
}

@media (max-width: 480px) {
  .bubble-bgwall li {
    display: none;
  }
  
  .bubble-bgwall li:nth-child(1),
  .bubble-bgwall li:nth-child(3),
  .bubble-bgwall li:nth-child(5) {
    display: flex;
  }
  
  .forgot-container {
    width: 98vw;
    max-height: 98vh;
  }
  
  .step-indicator {
    transform: scale(0.85);
  }
  
  .forgot-header h1 {
    font-size: 20px;
  }
  
  .completion-icon {
    font-size: 36px;
  }
  
  .completion-info h3 {
    font-size: 20px;
  }
}

/* 滚动条样式 */
.forgot-container::-webkit-scrollbar {
  width: 6px;
}

.forgot-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.forgot-container::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 107, 0.5);
  border-radius: 3px;
}

.forgot-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 107, 107, 0.7);
}
</style>
